import Mapping from '../../components/Network/Mapping'
import BadgeLeft from '../../components/Network/BadgeLeft'
import ImgBox from '../../components/Common/ImgBox.vue'
import * as echarts from 'echarts'
import { baseURL } from '../../utils/ipConfig'

export default {
    name: "Network",
    components: {
        Mapping,
        BadgeLeft,
        ImgBox
    },
    data() {
        return {
            tableData: [],
            areaCode: "",
            activeName: "first",
            tabData: [
                {
                    name: "总用户数",
                    id: "first",
                    data: [],
                },
                {
                    name: "附着",
                    id: "second",
                    data: [],
                },
                {
                    name: "PDP",
                    id: "third",
                    data: [],
                },
                {
                    name: "TCP",
                    id: "fourth",
                    data: [],
                },
                {
                    name: "HTTP",
                    id: "HTTP",
                    data: [],
                },
                {
                    name: "TCP时延",
                    id: "TCP",
                    data: [],
                },
            ],
            statisticss: {},
            hours: [],
            foot: "",
            // touchTest:false,
            startTime: "",
            endTime: ""
        };
    },
    beforeMount() {
    },
    mounted() {
        this.item();
    },
    methods: {
        item() {
            let _this = this;
            let params = new URLSearchParams()
            params.append("startTime", "2021110110")
            _this.$ajax
                .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
                .then(function (res) {
                    //请求成功
                    let resData = res.data;
                    if (resData.code == 200) {
                        let hours = [];
                        resData.data.forEach((item) => {
                            // 日期
                            hours.push(item.hour);
                        });
                        _this.endTime = hours[hours.length - 1];
                        _this.getDataList();
                        _this.StatisticsData();
                    }
                })
                .catch(function (error) {
                    //请求失败
                    console.log(error);
                });
        },
        // 进入页面表格加载
        getDataList() {
            let _this = this;
            let params = new URLSearchParams();
            params.append("cityCode", _this.areaCode);
            _this.$ajax
                .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
                .then(function (res) {
                    //请求成功
                    let resData = res.data;
                    if (resData.code == 200) {
                        _this.hours = [];
                        resData.data.forEach((item) => {
                            //  时间
                            _this.hours.push(item.hour + "");
                        });
                        _this.foot = _this.hours[_this.length - 1];
                        let time = [];
                        time = _this.hours.map(
                            (item) => item.substring(item.length - 2) + ":00"
                        );
                        _this.hours = time;
                        for (let index = 0; index < _this.tabData.length; index++) {
                            if (_this.tabData[index].id == "first") {
                                _this.tabData[index].data = [];
                                resData.data.forEach((item) => {
                                    //  总用户数
                                    _this.tabData[index].data.push(item.usercount);
                                });
                                _this.drawLine(_this.tabData[index].id, _this.tabData[index].data);
                            } else if (_this.tabData[index].id == "second") {
                                _this.tabData[index].data = [];
                                resData.data.forEach((item) => {
                                    //  附着成功率
                                    _this.tabData[index].data.push(item.attch_ask_success_rate);
                                });
                                _this.drawLine(_this.tabData[index].id, _this.tabData[index].data);
                            } else if (_this.tabData[index].id == "third") {
                                _this.tabData[index].data = [];
                                resData.data.forEach((item) => {
                                    //  PDP成功率
                                    _this.tabData[index].data.push(item.pdp_ask_success_rate);
                                });
                                _this.drawLine(_this.tabData[index].id, _this.tabData[index].data);
                            } else if (_this.tabData[index].id == "fourth") {
                                _this.tabData[index].data = [];
                                resData.data.forEach((item) => {
                                    //  TCP成功率
                                    _this.tabData[index].data.push(item.tcp_ask_success_rate);
                                });
                                _this.drawLine(_this.tabData[index].id, _this.tabData[index].data);
                            } else if (_this.tabData[index].id == "HTTP") {
                                _this.tabData[index].data = [];
                                resData.data.forEach((item) => {
                                    //  http成功率
                                    _this.tabData[index].data.push(item.http_ask_success_rate);
                                });
                                _this.drawLine(_this.tabData[index].id, _this.tabData[index].data);
                            } else {
                                resData.data.forEach((item) => {
                                    _this.tabData[index].data = [];
                                    //  TCP时延
                                    _this.tabData[index].data.push(item.tcp_create_time + item.tcp_suc_req_time);
                                })
                                _this.drawLine(_this.tabData[index].id, _this.tabData[index].data);
                            }
                        }
                        let param = new URLSearchParams()
                        param.append('endTime', _this.endTime)
                        param.append('startTime', _this.endTime)
                        _this.$ajax
                            .post(`${baseURL.ip1}/pc/getAllBusinessAnalysisData`, param)
                            .then(function (res) {
                                //请求成功
                                let resData = res.data;
                                if (resData.code == 200) {
                                    for (var i = 0; i < resData.data.length; i++) {
                                        if (resData.data[i].dataType == "全国") {
                                            if (resData.data[i].data !== null) {
                                                _this.reports = resData.data[i].data;
                                            } else {
                                                _this.reports = {
                                                    businesscount: 0,
                                                    usercount: 0,
                                                    active_user_nums: 0,
                                                    sum_throughputcount: 0,
                                                    upward_flowcount: 0,
                                                    downward_flowcount: 0,
                                                }
                                            }
                                        }
                                    }
                                }
                            })
                            .catch(function (error) {
                                //请求失败
                                console.log(error);
                            });
                    }
                })
                .catch(function (error) {
                    //请求失败
                    console.log(error);
                });
            _this.$ajax
                .post(`${baseURL.ip1}/pc/getAllBusinessAnalysisData`)
                .then(function (res) {
                    //请求成功
                    let resData = res.data;
                    if (resData.code == 200) {
                        for (var i = 0; i < resData.data.length; i++) {
                            if (resData.data[i].dataType == "全国") {
                                if (resData.data[i].data !== null) {
                                    _this.reports = resData.data[i].data;
                                } else {
                                    _this.reports = {
                                        businesscount: 0,
                                        usercount: 0,
                                        active_user_nums: 0,
                                        sum_throughputcount: 0,
                                        upward_flowcount: 0,
                                        downward_flowcount: 0,
                                    }
                                }
                            }
                        }
                    }
                })
                .catch(function (error) {
                    //请求失败
                    console.log(error);
                });

        },
        getDataLists() {
            let _this = this;
            if (_this.areaCode == "") {
                _this.$ajax
                    .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`)
                    .then(function (res) {
                        //请求成功
                        let resData = res.data;
                        if (resData.code == 200) {
                            _this.hours = [];
                            resData.data.forEach((item) => {
                                //  时间
                                _this.hours.push(item.hour + "");
                            });
                            let time = [];
                            time = _this.hours.map(
                                (item) => item.substring(item.length - 2) + ":00"
                            );
                            _this.hours = time;
                            for (let index = 0; index < _this.tabData.length; index++) {
                                if (_this.tabData[index].id == "first") {
                                    _this.tabData[index].data = [];
                                    resData.data.forEach((item) => {
                                        //  总用户数
                                        _this.tabData[index].data.push(item.usercount);
                                    });
                                    _this.drawLine(_this.tabData[index].id, _this.tabData[index].data);
                                } else if (_this.tabData[index].id == "second") {
                                    _this.tabData[index].data = [];
                                    resData.data.forEach((item) => {
                                        //  附着成功率
                                        _this.tabData[index].data.push(item.attch_ask_success_rate);
                                    });
                                    _this.drawLine(_this.tabData[index].id, _this.tabData[index].data);
                                } else if (_this.tabData[index].id == "third") {
                                    _this.tabData[index].data = [];
                                    resData.data.forEach((item) => {
                                        //  PDP成功率
                                        _this.tabData[index].data.push(item.pdp_ask_success_rate);
                                    });
                                    _this.drawLine(_this.tabData[index].id, _this.tabData[index].data);
                                } else if (_this.tabData[index].id == "fourth") {
                                    _this.tabData[index].data = [];
                                    resData.data.forEach((item) => {
                                        //  TCP成功率
                                        _this.tabData[index].data.push(item.tcp_ask_success_rate);
                                    });
                                    _this.drawLine(_this.tabData[index].id, _this.tabData[index].data);
                                } else if (_this.tabData[index].id == "HTTP") {
                                    _this.tabData[index].data = [];
                                    resData.data.forEach((item) => {
                                        //  http成功率
                                        _this.tabData[index].data.push(item.http_ask_success_rate);
                                    });
                                    _this.drawLine(_this.tabData[index].id, _this.tabData[index].data);
                                } else {
                                    _this.tabData[index].data = [];
                                    resData.data.forEach((item) => {
                                        //  TCP时延
                                        _this.tabData[index].data.push(item.tcp_create_time + item.tcp_suc_req_time);
                                    })
                                    console.log( _this.tabData[index].data);
                                    _this.drawLine(_this.tabData[index].id, _this.tabData[index].data);
                                }
                            }
                        }
                    })
                    .catch(function (error) {
                        //请求失败
                        console.log(error);
                    });
                _this.$ajax
                    .post(`${baseURL.ip1}/pc/getAllBusinessAnalysisData`)
                    .then(function (res) {
                        //请求成功
                        let resData = res.data;
                        if (resData.code == 200) {
                            for (var i = 0; i < resData.data.length; i++) {
                                if (resData.data[i].dataType == "全国") {
                                    if (resData.data[i].data !== null) {
                                        _this.reports = resData.data[i].data;
                                    } else {
                                        _this.reports = {
                                            businesscount: 0,
                                            usercount: 0,
                                            active_user_nums: 0,
                                            sum_throughputcount: 0,
                                            upward_flowcount: 0,
                                            downward_flowcount: 0,
                                        }
                                    }
                                }
                            }
                        }
                    })
                    .catch(function (error) {
                        //请求失败
                        console.log(error);
                    });
            } else {
                let params = new URLSearchParams();
                params.append("cityCode", _this.areaCode);
                _this.$ajax
                    .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
                    .then(function (res) {
                        //请求成功
                        let resData = res.data;
                        if (resData.code == 200) {
                            _this.hours = [];
                            resData.data.forEach((item) => {
                                //  时间
                                _this.hours.push(item.hour + "");
                            });
                            let time = [];
                            time = _this.hours.map(
                                (item) => item.substring(item.length - 2) + ":00"
                            );
                            _this.hours = time;
                            for (let index = 0; index < _this.tabData.length; index++) {
                                if (_this.tabData[index].id == "first") {
                                    _this.tabData[index].data = [];
                                    resData.data.forEach((item) => {
                                        //  总用户数
                                        _this.tabData[index].data.push(item.usercount);
                                    });
                                    _this.drawLine(_this.tabData[index].id, _this.tabData[index].data,0);
                                } else if (_this.tabData[index].id == "second") {
                                    _this.tabData[index].data = [];
                                    resData.data.forEach((item) => {
                                        //  附着成功率
                                        _this.tabData[index].data.push(item.attch_ask_success_rate);
                                    });
                                    _this.drawLine(_this.tabData[index].id, _this.tabData[index].data,80);
                                } else if (_this.tabData[index].id == "third") {
                                    _this.tabData[index].data = [];
                                    resData.data.forEach((item) => {
                                        //  PDP成功率
                                        _this.tabData[index].data.push(item.pdp_ask_success_rate);
                                    });
                                    _this.drawLine(_this.tabData[index].id, _this.tabData[index].data,80);
                                } else if (_this.tabData[index].id == "fourth") {
                                    _this.tabData[index].data = [];
                                    resData.data.forEach((item) => {
                                        //  TCP成功率
                                        _this.tabData[index].data.push(item.tcp_ask_success_rate);
                                    });
                                    _this.drawLine(_this.tabData[index].id, _this.tabData[index].data,80);
                                } else if (_this.tabData[index].id == "HTTP") {
                                    _this.tabData[index].data = [];
                                    resData.data.forEach((item) => {
                                        //  http成功率
                                        _this.tabData[index].data.push(item.http_ask_success_rate);
                                    });
                                    _this.drawLine(_this.tabData[index].id, _this.tabData[index].data,80);
                                } else {
                                    _this.tabData[index].data = [];
                                    resData.data.forEach((item) => {
                                        //  TCP时延
                                        _this.tabData[index].data.push(item.tcp_create_time + item.tcp_suc_req_time);
                                    })
                                    _this.drawLine(_this.tabData[index].id, _this.tabData[index].data,80);
                                }
                            }
                        }
                    })
                    .catch(function (error) {
                        //请求失败
                        console.log(error);
                    });

            }
        },
        drawLine(id, data,min) {
            let myChart = this.$echarts.init(document.getElementById(id));
            myChart.setOption({
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                grid: {
                    top: "8%",
                    left: "15%",
                    right: "4%",
                    bottom: "10%",
                },
                xAxis: {
                    type: 'category',
                    data: this.hours,
                    axisTick: {
                        show: false,
                    },
                    boundaryGap: false,
                },
                yAxis: {
                    type: "value",
                    min:min,
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        type: "line",
                        data: data,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#6686C0' },
                                    { offset: 0.25, color: '#87AAEA' },
                                    { offset: 0.5, color: '#7CA1E7' },
                                    { offset: 0.75, color: '#6A91DA' },
                                    { offset: 1, color: '#6686C0' }
                                ])
                        },
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#6686C0' },
                                    { offset: 0.25, color: '#87AAEA' },
                                    { offset: 0.5, color: '#7CA1E7' },
                                    { offset: 0.75, color: '#6A91DA' },
                                    { offset: 1, color: '#6686C0' }
                                ])
                        },
                    },
                ],
            });
        },
        // 页面切换
        Subculture(data) {
            this.areaCode = data;
            this.getDataLists();
            this.StatisticsData();
        },
        // 表格 
        StatisticsData() {
            let _this = this;
            let params = new URLSearchParams()
            params.append('cityCode', _this.areaCode)
            // params.append('pageNum', 1)
            // params.append('pageSize',10)
            // 分类数据
            _this.$ajax
                .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
                .then(function (res) {
                    //请求成功
                    let resData = res.data;
                    if (resData.code == 200) {
                        let hours = [];
                        resData.data.forEach((item) => {
                            // 日期
                            hours.push(item.hour);
                        });
                        _this.foot = hours[hours.length - 1];
                        let param = new URLSearchParams()
                        param.append('cityCode', _this.areaCode)
                        param.append('endTime', _this.endTime)
                        param.append('startTime', _this.endTime)
                        _this.$ajax
                            .post(`${baseURL.ip1}/pc/getAllBusinessAnalysisData`, param)
                            .then(function (res) {
                                //请求成功
                                let resData = res.data;
                                if (resData.code == 200) {
                                    for (var i = 0; i < resData.data.length; i++) {
                                        if (resData.data[i].dataType == "全国") {
                                            _this.statisticss = resData.data[i].data;
                                        }
                                    }
                                }
                            })
                            .catch(function (error) {
                                //请求失败
                                console.log(error);
                            });
                    }
                })
                .catch(function (error) {
                    //请求失败
                    console.log(error);
                });
        }


    },
};